ui(mobile): Replace bottom sheet with native screens (#690)

* Remove bottom sheet from bookmark info page

* Remove bottom sheet from manage lists page

* Remove bottom sheet from new list page

* Remove bottom sheet from new bookmark page

* Drop bottom-sheets

* Improve the look of the modals

* Make the search page fade from bottom

1 files changed, 6 insertions, 27 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug].tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
index 9459488a..87330a88 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug].tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import {
   Alert,
   Keyboard,
@@ -12,8 +12,6 @@ import WebView from "react-native-webview";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import BookmarkAssetImage from "@/components/bookmarks/BookmarkAssetImage";
 import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
-import ListPickerModal from "@/components/bookmarks/ListPickerModal";
-import ViewBookmarkModal from "@/components/bookmarks/ViewBookmarkModal";
 import FullPageError from "@/components/FullPageError";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import { Button } from "@/components/ui/Button";
@@ -23,13 +21,7 @@ import { Input } from "@/components/ui/Input";
 import { useToast } from "@/components/ui/Toast";
 import { useAssetUrl } from "@/lib/hooks";
 import { api } from "@/lib/trpc";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import {
-  ArrowUpFromLine,
-  ClipboardList,
-  Globe,
-  Trash2,
-} from "lucide-react-native";
+import { ClipboardList, Globe, Info, Trash2 } from "lucide-react-native";
 
 import {
   useDeleteBookmark,
@@ -40,8 +32,6 @@ import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
   const router = useRouter();
-  const viewBookmarkModal = useRef<BottomSheetModal>(null);
-  const manageListsSheetRef = useRef<BottomSheetModal>(null);
   const { mutate: deleteBookmark, isPending: isDeletionPending } =
     useDeleteBookmark({
       onSuccess: () => {
@@ -84,7 +74,8 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
         />
       ),
       shouldRender: true,
-      onClick: () => manageListsSheetRef.current?.present(),
+      onClick: () =>
+        router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`),
       disabled: false,
     },
     {
@@ -92,13 +83,11 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
       icon: (
         <TailwindResolver
           className="text-foreground"
-          comp={(styles) => (
-            <ArrowUpFromLine color={styles?.color?.toString()} />
-          )}
+          comp={(styles) => <Info color={styles?.color?.toString()} />}
         />
       ),
       shouldRender: true,
-      onClick: () => viewBookmarkModal.current?.present(),
+      onClick: () => router.push(`/dashboard/bookmarks/${bookmark.id}/info`),
       disabled: false,
     },
     {
@@ -130,16 +119,6 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
   ];
   return (
     <View>
-      <ViewBookmarkModal
-        bookmark={bookmark}
-        ref={viewBookmarkModal}
-        snapPoints={["95%"]}
-      />
-      <ListPickerModal
-        ref={manageListsSheetRef}
-        snapPoints={["50%", "90%"]}
-        bookmarkId={bookmark.id}
-      />
       <View className="flex flex-row items-center justify-between px-10 pb-2 pt-4">
         {actions.map(
           (a) =>